<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="logo" @click="$router.push('/')">
          <img src="/exam-ai-logo.svg" alt="智考 Logo">
          <span class="logo-text">智考</span>
        </div>
        <div class="nav-container">
          <el-menu mode="horizontal" :default-active="activeMenu" class="nav-menu" @select="handleMenuSelect"
            text-color="#303133" active-text-color="#2563eb" :active-class="'active-menu'"
            background-color="transparent">
            <el-sub-menu index="products">
              <template #title><span class="nav-text">产品中心</span></template>
              <el-menu-item index="product-1" class="submenu-item">在线考试系统</el-menu-item>
              <el-menu-item index="product-2" class="submenu-item">题库管理系统</el-menu-item>
              <el-menu-item index="product-3" class="submenu-item">智能组卷系统</el-menu-item>
              <el-menu-item index="product-4" class="submenu-item">数据分析平台</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="solutions">
              <template #title><span class="nav-text">解决方案</span></template>
              <el-menu-item index="solution-1" class="submenu-item">教育机构</el-menu-item>
              <el-menu-item index="solution-2" class="submenu-item">企业培训</el-menu-item>
              <el-menu-item index="solution-3" class="submenu-item">认证考试</el-menu-item>
              <el-menu-item index="solution-4" class="submenu-item">招聘测评</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="api"><span class="nav-text">API调用</span></el-menu-item>
            <el-menu-item index="contact"><span class="nav-text">联系我们</span></el-menu-item>
          </el-menu>
        </div>
        <div class="auth-buttons">
          <el-button type="text" @click="$router.push('/login')" class="login-btn">登录</el-button>
          <el-button type="primary" @click="$router.push('/register')" class="register-btn">免费注册</el-button>
        </div>
      </div>
    </header>

    <main>
      <!-- 轮播图区域 -->
      <div class="hero-section">
        <Swiper :modules="[Pagination, Autoplay, EffectFade, Navigation]" :pagination="{ clickable: true }"
          :autoplay="{ delay: 5000, disableOnInteraction: false }" :effect="'fade'" :speed="1000" :navigation="true"
          class="swiper-container">
          <SwiperSlide class="slide-1">
            <div class="slide-content">
              <h3 class="animate__animated animate__fadeInDown">智能在线考试系统</h3>
              <p class="animate__animated animate__fadeInUp animate__delay-1s">高效、安全、可靠的考试解决方案</p>
              <el-button type="primary" size="large"
                class="cta-button animate__animated animate__fadeInUp animate__delay-2s">立即开始</el-button>
            </div>
          </SwiperSlide>
          <SwiperSlide class="slide-2">
            <div class="slide-content">
              <h3 class="animate__animated animate__fadeInDown">多角色支持</h3>
              <p class="animate__animated animate__fadeInUp animate__delay-1s">学生、教师、机构一站式服务</p>
              <el-button type="primary" size="large"
                class="cta-button animate__animated animate__fadeInUp animate__delay-2s">产品下载</el-button>
            </div>
          </SwiperSlide>
          <SwiperSlide class="slide-3">
            <div class="slide-content">
              <h3 class="animate__animated animate__fadeInDown">API集成</h3>
              <p class="animate__animated animate__fadeInUp animate__delay-1s">轻松对接现有系统</p>
              <el-button type="primary" size="large"
                class="cta-button animate__animated animate__fadeInUp animate__delay-2s">API文档</el-button>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>

      <!-- 产品特点 -->
      <section class="features">
        <div class="container">
          <h2 class="section-title">为什么选择我们？</h2>
          <div class="features-grid">
            <div class="feature-card" v-for="(feature, index) in features" :key="index" data-aos="fade-up"
              :data-aos-delay="index * 100">
              <div class="feature-icon">
                <i :class="feature.icon"></i>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 解决方案 -->
      <section class="solutions">
        <div class="container">
          <h2 class="section-title">解决方案</h2>
          <div class="solutions-grid">
            <div class="solution-card" v-for="(solution, index) in solutions" :key="index" data-aos="fade-up">
              <div class="solution-content">
                <h3>{{ solution.title }}</h3>
                <p>{{ solution.description }}</p>
                <el-button type="text" class="learn-more">了解更多 <i class="el-icon-arrow-right"></i></el-button>
              </div>
              <div class="solution-image">
                <img :src="solution.image" :alt="solution.title">
              </div>
            </div>
          </div>
        </div>
      </section>

    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-top">
        <div class="container-footer">
          <div class="footer-grid">
            <div class="footer-col">
              <div class="footer-logo">
                <img src="/exam-ai-logo.svg" alt="智考 Logo" style="height: 30px;">
                <span>智考 & Exam AI</span>
              </div>
              <p class="footer-about">
                Exam AI 提供智能在线考试解决方案，助力教育机构和企业实现高效、安全的考试评估。
              </p>
              <div class="social-links">
                <i class="el-icon-weibo social-icon"></i>
                <i class="el-icon-weixin social-icon"></i>
                <i class="el-icon-zhihu social-icon"></i>
                <i class="el-icon-github social-icon"></i>
              </div>
            </div>
            <div class="footer-col">
              <h3>产品</h3>
              <ul>
                <li><a href="#">在线考试系统</a></li>
                <li><a href="#">题库管理系统</a></li>
                <li><a href="#">智能组卷</a></li>
                <li><a href="#">数据分析平台</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h3>解决方案</h3>
              <ul>
                <li><a href="#">教育机构</a></li>
                <li><a href="#">企业培训</a></li>
                <li><a href="#">认证考试</a></li>
                <li><a href="#">招聘测评</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h3>资源</h3>
              <ul>
                <li><a href="#">文档中心</a></li>
                <li><a href="#">API 接口</a></li>
                <li><a href="#">开发者指南</a></li>
                <li><a href="#">SDK 下载</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h3>联系我们</h3>
              <div class="contact-info">
                <p><i class="el-icon-location"></i> 地址：兰州市兰州新区长江大道东段1942号</p>
                <p><i class="el-icon-phone"></i>联系电话：0931-2861012 </p>
                <p><i class="el-icon-message"></i>邮箱：Yonlyjtt@163.com</p>
                <p><i class="el-icon-time"></i>工作时间：周一至周五 9:00-18:00</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <div class="footer-bottom-content">
            <div class="copyright">
              &copy; 2025 Exam AI. All rights reserved.
            </div>
            <div class="footer-links">
              <a href="#">隐私政策</a>
              <a href="#">服务条款</a>
              <a href="#">法律声明</a>
              <a href="#">帮助中心</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination, Autoplay, EffectFade, Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'
import 'swiper/css/effect-fade'
import 'swiper/css/navigation'
import 'animate.css'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { useFormValidation } from '@/composables/useFormValidation'
import { useMenu } from '@/composables/useMenu'
import '@/styles/home.css'

onMounted(() => {
  // 为body和html添加home-page类
  document.body.classList.add('home-page')
  document.documentElement.classList.add('home-page')

  // 直接设置样式，确保覆盖全局样式
  document.body.style.height = 'auto'
  document.body.style.overflow = 'visible'
  document.documentElement.style.height = 'auto'
  document.documentElement.style.overflow = 'visible'

  // 确保#app元素也可以滚动
  const appElement = document.getElementById('app')
  if (appElement) {
    appElement.style.height = 'auto'
    appElement.style.overflow = 'visible'
  }

  AOS.init({
    duration: 1000,
    once: true,
    easing: 'ease-in-out',
    offset: 100
  })
})

// 组件卸载时移除类和样式
onUnmounted(() => {
  document.body.classList.remove('home-page')
  document.documentElement.classList.remove('home-page')

  // 恢复默认样式
  document.body.style.height = ''
  document.body.style.overflow = ''
  document.documentElement.style.height = ''
  document.documentElement.style.overflow = ''

  const appElement = document.getElementById('app')
  if (appElement) {
    appElement.style.height = ''
    appElement.style.overflow = ''
  }
})

const authStore = useAuthStore()
const router = useRouter()

const activeMenu = ref('home')
const activeTab = ref('login')

const loginForm = ref({
  username: '',
  password: '',
  role: 'student',
  rememberMe: false
})

const bannerSlides = ref([
  {
    image: '/images/banner1.jpg',
    title: '智能考试新时代',
    subtitle: '革新教育评估体系',
    buttonText: '立即开始',
    link: '/start'
  },
  {
    image: '/images/banner2.jpg',
    title: '多端协同解决方案',
    subtitle: '随时随地，便捷考试',
    buttonText: '产品下载',
    link: '/download'
  },
  {
    image: '/images/banner3.jpg',
    title: 'API开放平台',
    subtitle: '灵活集成，扩展无限',
    buttonText: 'API调用',
    link: '/api'
  },
  {
    image: '/images/banner4.jpg',
    title: '企业定制方案',
    subtitle: '一站式考试解决方案',
    buttonText: '解决方案',
    link: '/solutions'
  }
]);

const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: '',
  role: 'student',
  institution: ''
});

const features = [
  {
    icon: 'el-icon-monitor',
    title: '智能组卷',
    description: '基于AI算法的智能组卷系统，快速生成高质量试卷'
  },
  {
    icon: 'el-icon-lock',
    title: '安全防作弊',
    description: '人脸识别、切屏监控等多重防作弊机制，保障考试公平性'
  },
  {
    icon: 'el-icon-data-analysis',
    title: '数据分析',
    description: '多维度的数据分析报告，直观展示考试结果和学员表现'
  },
  {
    icon: 'el-icon-connection',
    title: '多端支持',
    description: '支持PC、手机、平板等多终端，随时随地参加考试'
  }
];

const solutions = [
  {
    title: '教育机构解决方案',
    description: '为学校和教育机构提供全方位的在线考试解决方案，包括在线组卷、自动阅卷、成绩分析等功能。',
    image: '/public/education.jpg'
  },
  {
    title: '企业培训解决方案',
    description: '帮助企业实现员工培训、考核一体化，提升培训效果，降低培训成本。',
    image: '/public/bequoted.jpg'
  }
];

const { registerRules } = useFormValidation(registerForm);

const registerFormRef = ref(null);

const handleRegister = async () => {
  try {
    await registerFormRef.value.validate();
    await authStore.register(registerForm.value);
    router.push('/');
  } catch (error) {
    console.error('注册失败:', error);
  }
};

const { handleMenuSelect } = useMenu();

const handleLogin = async () => {
  try {
    await authStore.login(loginForm.value);
    router.push('/');
  } catch (error) {
    console.error('登录失败:', error);
  }
};
</script>
